<template>
  <div class="box">
    <div class="content">
      <h1>{{ detail.title }}</h1>
      <el-row class="label">
        <el-col :span="5" :offset="2"
          ><p><span>来源：</span>{{ detail.adminName }}</p></el-col
        >
        <el-col :span="7"
          ><p><span>时间：</span>{{ detail.time }}</p></el-col
        >
        <el-col :span="5"
          ><p><span>浏览量：</span>{{ detail.viewNum }}</p></el-col
        >
        <el-col :span="2"></el-col>
      </el-row>
      <div
        class="content1"
        style="lineHeight: 2; fontsize: 18px"
        v-html="detail.content"
      ></div>
      <div>
        <div class="icon" @click="changeLike">
          <i v-show="!detail.isCollection" class="iconfont icon-shoucang3"></i>
          <i v-show="detail.isCollection" class="iconfont icon-shoucang2"></i>
        </div>
        <p class="shoucan">
          共<span>{{ detail.collectionNum }}</span
          >个人收藏
        </p>
        <div class="fenxiang">
          <p>
            分享到：<span class="bi"
              ><i class="iconfont icon-QQ-circle-fill"></i></span
            ><span class="gi"><i class="iconfont icon-sign_wechat"></i></span
            ><span class="ri"><i class="iconfont icon-weibo"></i></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
      knowledgeId: "",
      know: {
        isLike: true,
      },
    };
  },
  mounted() {
    this.knowledgeId = this.$route.params.id;
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.$axios({
        method: "get",
        url: "/knowledge/selectById",
        params: { knowledgeId: this.knowledgeId },
      })
        .then((res) => {
          console.log(res.data);
          this.know = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeLike() {
      let data = this.detail;
      let allData = {
        targetId: data.id,
        status: data.isCollection == false ? 1 : -1,
        type: 3,
      };
      this.$store.dispatch("collection", allData).then((res) => {
        this.detail.isCollection = !this.detail.isCollection;
        //改变数量
        this.detail.collectionNum=data.isCollection == true ?this.detail.collectionNum+1:this.detail.collectionNum-1
        
      });
    },
  },
  mounted() {
    let id = this.$route.query.id;
    this.$axios({
      url: "/knowledge/selectById",
      method: "get",
      params: {
        knowledgeId: id,
      },
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        this.detail = res.data;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.box {
  background-color: #f2f7fb;
  overflow: hidden;
  .content1 {
    width: 900px;
    margin: 50px auto;
    text-align: left;
  }
  .content {
    width: 900px;
    margin: 50px auto;
    h1 {
      font-weight: 400;
      margin: 20px 0;
    }
    .label span {
      color: #999;
    }
    & > p,
    & > pre {
      font-size: 18px;
      text-align: left;
      line-height: 2.2;
      text-indent: 2em;
      margin: 20px 0;
      width: 100%;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: "Microsoft YaHei";
    }
    img {
      width: 100%;
    }
    .tip {
      text-align: left;
      display: inline-block;
      color: #999;
    }
    .icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: white;
      line-height: 60px;
      margin: 20px auto;

      box-shadow: 0 0 5px 5px rgba(200, 200, 200, 0.5);
      & > i {
        font-size: 45px;
        color: #fcc64a;
      }
    }
    .shoucan {
      color: #999;
      span {
        font-size: 30px;
        color: #312a6d;
      }
    }
    .fenxiang {
      margin: 20px 0;
      text-align: right;
      color: #999;
      span {
        margin: 0 10px;

        & > i {
          font-size: 40px;
        }
      }
      & > p > span:first-child > i {
        font-size: 45px !important;
      }
    }
  }
}
</style>